<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <title>购物车</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/vant.css">
    <link rel="stylesheet" href="../../css/main.css">
    <style>
        .van-cell {
            background: none;
        }

        .padding-t {
            margin-top: .65rem;
        }
    </style>
</head>

<body>
    <div class="app cart" v-cloak>
        <header>
            <div class="flex-x-sb">
                <span class="iconfont goback" @click="back">&#xe66f;</span>
                <div class="title">
                    购物车
                </div>
                <div class="txt_btn" @click="edit">
                    {{isEdit?'完成':'管理'}}
                </div>
            </div>
        </header>
        <div class="padding-t">
            <div class="cart-list">
                <div class="cart-item" v-for="(item,index) in cartList" :key="index">
                    <div class="cart-f1" @click="selectOrder(item,index)">
                        <img :src="item.isSelect?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/no-select.png'" alt="">
                        <span>{{item.shopName}}</span>
                    </div>
                    <div class="cart-order-item" v-for="(it,idx) in item.cartItems" :key="idx">
                        <div class="cart-order-f1">
                            <img :src="it.isSelect?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/no-select.png'"
                                alt="" @click="selectGoods(it,index)">
                            <img v-lazy="it.imageUrl?it.imageUrl:'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/default/item_img.png'" alt="">
                            <div class="cart-order-f1-info">
                                <div>{{it.title}}</div>
                                <div class="money"><span>¥</span>{{Number(it.price).toFixed(2)}}</div>
                            </div>
                        </div>
                        <div class="cart-order-f2">
                            <div class="opt-item sub" @click="add(-1,it)"></div>
                            <div class="cart-total opt-item">{{it.quantity}}</div>
                            <div class="opt-item add" @click="add(1,it)"></div>
                        </div>
                    </div>
                </div>
                <div class="collect-empty" v-if="cartList && cartList.length === 0">
                    <img src="https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/empty/empty.png" alt="">
                    <div>购物车是空的～</div>
                </div>
            </div>
        </div>
        <div class="cart-submit flex-x-sb" v-if="cartList && cartList.length > 0">
            <div class="left" @click="selectAll">
                <img :src="isSelectAll?'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/select.png':'https://zzzzkj.oss-cn-shanghai.aliyuncs.com/static/tiexie/app/image/image/cart/no-select.png'" alt="">
                <span style="line-height: 1">全选</span>
            </div>
            <div v-show="!isEdit" class="money"><span>¥</span>{{Number(total).toFixed(2)}}</div>
            <div class="btn" @click="doHandle">{{isEdit?'删除':'去结算'}}</div>
        </div>
    </div>
    <script src="../../script/api.js"></script>
    <script src="../../script/flexible.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/iconfont.js"></script>
    <script src="../../script/restful.js"></script>
    <script src="../../script/common.js"></script>
    <script src="../../script/businessCommon.js"></script>
    <script src="../../script/vant.min.js"></script>
    <script src="../../script/vue-lazyload.js"></script>
    <script>
        apiready = function () {
            imgLazyLoad();
            api.setRefreshHeaderInfo({
                bgColor: '#f7f7f7',
                textDown: '下拉更新有惊喜',
                textUp: '松开可以刷新'
            }, function (ret, err) {
                vm.initCarts()
            });
            vm = new Vue({
                el: '.app',
                data: {
                    isEdit: false,
                    total: 0,
                    isSelectAll: false,
                    cartList: [],
                },
                created() {
                },
                mounted() {
                    this.initCarts();
                },
                methods: {
                    back() {
                        api.closeWin();
                    },
                    initCarts() {
                        var vm = this;
                        cart("getCartList")({}, function (ret) {
                            if (ret.data.length > 0) {
                                vm.total = 0
                                ret.data.map(item => {
                                    item.isSelect = false
                                    item.cartItems.map(it => {
                                        it.isSelect = false
                                        // vm.total += Number(it.quantity) * Number(it.price)
                                        vm.total += 0
                                    })
                                })
                                vm.isSelectAll = false
                            }
                            vm.cartList = ret.data;

                        })
                    },
                    /**
                     * @author 郭赞
                     * @info 更新购物车数量
                     */
                    updateCartsNum(item) {
                        console.log(it);
                        cart('updateCartsNum')(item, function (ret) {

                        })
                    },
                    delCartsItem(productIds) {
                        api.confirm({
                            title: '是否删除商品',
                            buttons: ['确定', '取消']
                        }, function (ret, err) {
                            if (ret.buttonIndex == 1) {
                                cart('delCartsItem')({ productIds: productIds }, function (ret) {
                                    if (ret && ret.code === RESPONSE_OK) {
                                        toastMiddle('删除成功');
                                        vm.initCarts();
                                    }
                                })
                            }
                        });
                    },
                    doHandle() {
                        var vm = this;
                        if (vm.isEdit) {
                            const productIds = []
                            vm.cartList.map(item => {
                                item.cartItems.map(it => {
                                    if (it.isSelect) {
                                        productIds.push(it.productId)
                                    }
                                })
                            })
                            if (productIds.length === 0) {
                                return;
                            }
                            vm.delCartsItem(productIds);
                        } else {
                            var shops = []
                            this.cartList.map(item => {
                                var objShop = {
                                    products: [],
                                    shopId: item.shopId
                                }
                                item.cartItems.map(it => {
                                    if (it.isSelect) {
                                        var objProduct = {
                                            id: it.productId,
                                            quantity: it.quantity,
                                        }
                                        objShop.products.push(objProduct)
                                    }
                                })
                                if (objShop.products.length > 0) {
                                    shops.push(objShop)
                                }
                            })
                            if (shops.length == 0) {
                                toastMiddle('您还没有选择商品哦')
                                return false;
                            }
                            api.openWin({
                                name: 'create_order_win',
                                url: 'create_order_win.html',
                                bounces: false,
                                pageParam: {
                                    shops: shops
                                }
                            });
                        }
                    },
                    edit() {
                        this.isEdit = !this.isEdit
                        this.total = 0
                        this.isSelectAll = true
                        this.selectAll()
                    },
                    selectOrder(item, index) {
                        item.isSelect = !item.isSelect
                        item.cartItems.map(it => {
                            it.isSelect = item.isSelect
                            if (it.isSelect) {
                                this.total += Number(it.price) * Number(it.quantity)
                            } else {
                                this.total -= Number(it.price) * Number(it.quantity)
                            }
                        })
                        var orderIndex = this.cartList.findIndex(target => {
                            return !target.isSelect
                        })
                        if (orderIndex > -1) {
                            this.isSelectAll = false
                        } else {
                            this.isSelectAll = true
                        }
                    },
                    selectGoods(it, index) {
                        it.isSelect = !it.isSelect
                        if (it.isSelect) {
                            this.total += Number(it.price) * Number(it.quantity)
                        } else {
                            this.total -= Number(it.price) * Number(it.quantity)
                        }
                        var goodsIndex = this.cartList[index].cartItems.findIndex(item => {
                            return !item.isSelect
                        })
                        if (goodsIndex > -1) {
                            this.cartList[index].isSelect = false
                            this.isSelectAll = false
                        } else {
                            this.cartList[index].isSelect = true
                        }
                    },
                    selectAll() {
                        this.isSelectAll = !this.isSelectAll
                        console.log(this.isSelectAll);
                        if (this.isSelectAll) {
                            this.cartList.map(target => {
                                target.cartItems.map(item => {
                                    this.total += Number(item.quantity) * Number(item.price)
                                })
                            })
                        } else {
                            this.total = 0
                        }
                        this.cartList.map(target => {
                            target.isSelect = this.isSelectAll
                            target.cartItems.map(item => {
                                item.isSelect = this.isSelectAll
                            })
                        })
                    },
                    add(val, it) {
                        const num = it.quantity + val;
                        if (num <= 0) {
                            this.delCartsItem([it.productId]);
                        } else {
                            cart('updateCartsNum')({ productId: it.productId, quantity: num }, function (ret) {

                            })
                        }
                        if (Number(val) < 0 && it.quantity <= 1) {
                            return false;
                        }
                        it.quantity += Number(val)
                        if (it.isSelect) {
                            this.total = this.total + Number(val) * Number(it.price)
                        }
                    }

                },
            })
            api.addEventListener({
                name: 'paySuccess'
            }, function (ret, err) {
                vm.initCarts()
            });
            api.addEventListener({
                name: 'refreshCart'
            }, function (ret, err) {
                vm.initCarts()
            });

        }
    </script>
</body>

</html>